<template>
    <el-form
        :model="editForm"
        :rules="editFormRules"
        ref="editFormRef"
        label-width="100px"
    >
        <el-form-item
            label="学生学号"
            prop="stuId"
            :disabled=isDisable
        >
            <el-input
                v-model="editForm.stuId"
                :disabled=isDisable
                onkeyup="value=value.replace(/[^\d]/g,'')"
            />
        </el-form-item>
        <el-form-item
            label="学生名称"
            prop="name"
        >
            <el-input v-model="editForm.name"/>
        </el-form-item>
        <el-form-item
            label="学生性别"
            prop="sex"
        >
            <el-radio-group
                v-model="editForm.sex"
                size="medium"
            >
                <el-radio
                    label="男"
                    border
                >
                    男
                </el-radio>
                <el-radio
                    label="女"
                    border
                >
                    女
                </el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item
            label="邮箱"
            prop="email"
        >
            <el-input v-model="editForm.email"/>

        </el-form-item>

        <el-form-item
            label="班级"
            prop="classId"
            disabled
        >
            <el-select v-model="editForm.classId" style="width: 360px" filterable placeholder="请选择">
                <el-option
                    v-for="item in classOptions"
                    :key="item.className"
                    :label="item.className"
                    disabled
                    :value="item.classId">
                </el-option>
            </el-select>
        </el-form-item>

        <el-form-item
            label="绑定专业"
            prop="proId"
            disabled
        >
            <el-select
                v-model="editForm.proId"
                filterable
                style="width: 360px"
                disabled
                placeholder="试试搜索吧~">
                <el-option-group
                    v-for="group in proOptions"
                    :key="group.professionalTypeName"
                    :label="group.professionalTypeName">
                    <el-option
                        v-for="item in group.professions"
                        :key="item.proName"
                        :label="item.proName"
                        :value="item.proId">
                    </el-option>
                </el-option-group>
            </el-select>
        </el-form-item>
        <el-form-item
            label="学生电话"
            prop="phone"
        >
            <el-input
                v-model="editForm.phone"
                onkeyup="value=value.replace(/[^\d]/g,'')"
            />
        </el-form-item>
        <el-form-item
            label="身份证号"
            prop="cardId"
        >
            <el-input v-model="editForm.cardId"
                      onkeyup="value=value.replace(/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/,'')"
            />
        </el-form-item>

        <el-form-item
            label="毕业院校"
        >
            <el-input v-model="editForm.school"/>
        </el-form-item>

        <el-form-item
            label="民族"
        >
            <el-input v-model="editForm.national"/>
        </el-form-item>

        <el-form-item
            label="学历"
        >
            <el-input v-model="editForm.education"/>
        </el-form-item>

        <el-form-item
            label="政治面貌"
        >
            <el-input v-model="editForm.politicalStatus"/>
        </el-form-item>

        <el-form-item
            label="学生籍贯"
            prop="homeAddress"
        >
            <el-cascader
                style="width: 360px"
                placeholder="试试搜索城市名称吧~"
                v-model="studentNativePlaceTemp"
                :options="studentNativePlaceCascaderOptions"
                :props="{ expandTrigger: 'hover' }"
                filterable
                clearable
            />
        </el-form-item>

        <el-form-item
            label="联系地址"
        >
            <el-input v-model="editForm.contactAddress"/>
        </el-form-item>

        <el-form-item
            label="居住地址"
        >
            <el-input v-model="editForm.liveAddress"/>
        </el-form-item>

        <el-form-item
            label="就业状态"
            prop="employmentStatus"
        >
            <el-radio-group
                v-model="editForm.employmentStatus"
                size="medium"
            >
                <el-radio
                    label="参军"
                    border
                >
                    参军
                </el-radio>
                <el-radio
                    label="未就业"
                    border
                >
                    未就业
                </el-radio>
                <el-radio
                    label="已就业"
                    border
                >
                    已就业
                </el-radio>
                <el-radio
                    label="拟升学"
                    border
                >
                    拟升学
                </el-radio>
                <el-radio
                    label="专升本"
                    border
                >
                    专升本
                </el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item
            v-if="editForm.employmentStatus === '已就业'"
            label="直属主管"
            prop="boss"
        >
            <el-input v-model="editForm.boss"/>
        </el-form-item>
        <el-form-item
            v-if="editForm.employmentStatus === '已就业'"
            label="主管电话"
            prop="bossPhone"
        >
            <el-input
                v-model="editForm.bossPhone"
                onkeyup="value=value.replace(/[^\d]/g,'')"
            />
        </el-form-item>

        <el-form-item
            v-if="editForm.employmentStatus === '已就业'"
            label="实习薪资"
            prop="money"
        >
            <el-input v-model="editForm.money"/>
        </el-form-item>
        <el-form-item
            v-if="editForm.employmentStatus === '已就业'"
            label="企业名称"
            prop="entName"
        >
            <el-input v-model="editForm.entName"/>
        </el-form-item>

        <el-form-item
            v-if="editForm.employmentStatus === '已就业'"
            label="企业岗位"
            prop="postName"
            width="200px"
        >
            <el-input v-model="editForm.postName"/>
        </el-form-item>

        <el-form-item
            v-if="editForm.employmentStatus === '已就业'"
            label="岗位职责"
            prop="responsibility"
        >
            <el-input
                autosize
                type="textarea"
                v-model="editForm.responsibility"
            />
        </el-form-item>
        <el-form-item
            v-if="editForm.employmentStatus === '已就业'"
            label="工作地址"
            prop="workAddress"
        >
            <el-cascader
                style="width: 360px"
                placeholder="试试搜索城市名称吧~"
                v-model="EditWorkAddress"
                :options="workerNativePlaceCascaderOptions"
                :props="{ expandTrigger: 'hover' }"
                filterable
                clearable
            />
        </el-form-item>
        <el-form-item>
            <el-button
                type="primary"
                @click="editstudent"
            >修改信息</el-button>
        </el-form-item>
    </el-form>

</template>

<script>
    import { CodeToText, provinceAndCityData } from 'element-china-area-data'

    export default {
		name: 'modifyStudent',
        data(){
		    return{
                isDisable: false,
                /** 企业岗位联级菜单数据 */
                postDataCascaderOptions: '',
                /** 学生籍贯地址联级菜单数据 */
                studentNativePlaceCascaderOptions: provinceAndCityData,
                workerNativePlaceCascaderOptions : provinceAndCityData,
                /** 学生籍贯地址临时属性 */
                studentNativePlaceTemp: '',
                addWorkAddressPlace:'',
                EditWorkAddress: '',
                editForm: {
                    id:'',
                    userId:'',
                    /**
                     * 学号
                     */
                    stuId: '',
                    /**
                     * 签约企业
                     */
                    entName: '',
                    /**
                     * 班级id
                     */
                    classId: '',
                    /**
                     * 专业id
                     */
                    proId: '',
                    name: '',
                    /**
                     * 身份证号
                     */
                    cardId: '',
                    /**
                     * 毕业院校
                     */
                    school: '',
                    /**
                     * 性别
                     */
                    sex: '',
                    /**
                     * 民族
                     */
                    national: '',
                    /**
                     * 学历
                     */
                    education: '',
                    /**
                     * 政治面貌
                     */
                    politicalStatus: '',
                    /**
                     * 邮箱地址
                     */
                    email: '',
                    /**
                     * 联系电话
                     */
                    phone: '',
                    /**
                     * 联系地址
                     */
                    contactAddress: '',
                    /**
                     * 居住地
                     */
                    liveAddress: '',
                    /**
                     * 户籍
                     */
                    homeAddress: '',
                    /**
                     * 就业状态
                     */
                    employmentStatus: '',
                    /**
                     * 主管联系方式
                     */
                    bossPhone: '',
                    /**
                     * 主管
                     */
                    boss: '',
                    /**
                     * 工资
                     */
                    money: '',

                    /**
                     * 岗位名称
                     */
                    postName: '',
                    /**
                     * 岗位职责
                     */
                    responsibility: '',
                    workAddress:''
                },
                /** 编辑表单验证相关配置 */
                editFormRules: {
                    stuId: [
                        {
                            required: true,
                            message: '请输入学生学号',
                            trigger: 'blur'
                        },
                        {
                            min: 4,
                            max: 21,
                            message: '长度在 4 到 21 个字符',
                            trigger: 'blur'
                        }
                    ],
                    name: [
                        {
                            required: true,
                            message: '请输入学生名称',
                            trigger: 'blur'
                        },
                        {
                            min: 2,
                            max: 5,
                            message: '长度在 2 到 5 个字符',
                            trigger: 'blur'
                        }
                    ],
                    sex: [
                        {
                            required: true,
                            message: '请选择学生性别',
                            trigger: 'blur'
                        }
                    ],
                    classId: [
                        {
                            required: true,
                            message: '请选择班级绑定',
                            trigger: 'blur'
                        }
                    ],
                    email: [
                        {
                            required: true,
                            message: '请编写邮箱',
                            trigger: 'blur'
                        }
                    ],
                    proId: [
                        {
                            required: true,
                            message: '请选择专业',
                            trigger: 'blur'
                        }
                    ]
                },
                proOptions: [],
                classOptions: [],
                user: JSON.parse(window.sessionStorage.getItem('user'))
            }
        },
        created () {
		    this.getProfessionDataCascader();
		    this.getProfessionAndClassesDataCascaderOptions();
            this.getStudent()
        },
        watch:{
            studentNativePlaceTemp: function (val) {
                if (val.length !== 0) {
                    const data = CodeToText[val[0]] + '-' + CodeToText[val[1]]
                    this.editForm.homeAddress = data
                } else {
                    this.editForm.homeAddress = ''
                }
            },
            EditWorkAddress:function (val) {
                if (val.length !== 0) {
                    const data = CodeToText[val[0]] + '-' + CodeToText[val[1]]
                    this.editForm.workAddress = data
                } else {
                    this.editForm.workAddress = ''
                }
            }
        },
        methods:{
            editstudent () {
                let self = this;
                let data = self.editForm;
                this.$refs.editFormRef.validate(valid => {
                    if (valid) {
                        // 修复 多次修改学生信息，已就业学生表单会污染其他表单
                        if (this.editForm.employmentStatus !== '已就业') {
                            self.editForm.boss = ''
                            self.editForm.bossPhone = ''
                            self.editForm.money = ''
                            self.editForm.postName = ''
                            self.editForm.responsibility = ''
                        }
                        this.utils.sendReq({
                            queryUrl: 'student/update',
                            req: {
                                data: data,
                                method: 'post',
                                success: function (req) {
                                    if (req.data.code === 200) {
                                        self.$message({
                                            message: req.data.msg,
                                            type: 'success',
                                            showClose: true,
                                            center: true
                                        })
                                        self.getStudent()
                                    }
                                    if (req.data.code === 400) {
                                        self.$message({
                                            message: req.data.msg,
                                            type: 'error',
                                            showClose: true,
                                            center: true
                                        })
                                    }
                                },
                                error: function () {
                                    self.$message({
                                        message: '接口请求失败！',
                                        type: 'error',
                                        showClose: true,
                                        center: true
                                    })
                                }
                            }
                        })

                    }
                })
            },
            getStudent(){
                let self = this;
                self.utils.sendReq({
                    queryUrl: '/student/get',
                    req: {
                        method: 'post',
                        success: function (req) {
                            if (req.data.code === 200) {
                                self.editForm = req.data.data;
                                self.getAddress();
                            }
                        }
                    }
                })
            },
            getProfessionDataCascader () {
                let self = this
                self.utils.sendReq({
                    queryUrl: 'professionalType/queryAll',
                    req: {
                        method: 'get',
                        success: function (req) {
                            if (req.data.code === 200) {
                                self.proOptions = req.data.data
                            }
                        }
                    }
                })
            },
            getProfessionAndClassesDataCascaderOptions () {
                let self = this
                self.utils.sendReq({
                    queryUrl: 'classRoom/queryAll',
                    req: {
                        method: 'get',
                        success: function (req) {
                            if (req.data.code === 200) {
                                self.classOptions = req.data.data
                            }
                        }
                    }
                })
            },
            getAddress(){

                const chinaAddress = this.studentNativePlaceCascaderOptions
                const address = this.editForm.homeAddress.split('-')
                const arr1 = []
                for (let i = 0; i < chinaAddress.length; i++) {
                    // 获取省份
                    if (chinaAddress[i].label === address[0]) {
                        arr1.push(chinaAddress[i].value)
                        for (let ii = 0; ii < chinaAddress[i].children.length; ii++) {
                            // 获取市区等
                            if (chinaAddress[i].children[ii].label === address[1]) {
                                arr1.push(chinaAddress[i].children[ii].value)
                            }
                        }
                    }
                }
                this.studentNativePlaceTemp = arr1

                // 自动显示单位地址
                const chinaAddress1 = this.workerNativePlaceCascaderOptions
                const address1 = this.editForm.workAddress.split('-')
                const arr2 = []
                for (let i = 0; i < chinaAddress1.length; i++) {
                    // 获取省份
                    if (chinaAddress1[i].label === address1[0]) {
                        arr2.push(chinaAddress1[i].value)
                        for (let ii = 0; ii < chinaAddress1[i].children.length; ii++) {
                            // 获取市区等
                            if (chinaAddress1[i].children[ii].label === address1[1]) {
                                arr2.push(chinaAddress1[i].children[ii].value)
                            }
                        }
                    }
                }
                this.EditWorkAddress = arr2
            }
        }
    }
</script>

<style scoped>

</style>
